import { getQuestionNameList, } from "@/services";
import { IQuestionListQuery, IQuestionList, IPracticalProjectList } from "@/utils/questions";
import React, { useState, useEffect } from "react";
import styles from "./questionDetail.less"
import { Checkbox, Input, Button, Pagination, Modal, Select } from 'antd';
import { Link } from 'umi';
import { DownOutlined, PlusOutlined, SearchOutlined } from '@ant-design/icons';
import { observer } from 'mobx-react-lite';
let xx = ""
import useStore from "@/context/useStore";
import QuestionForm from "@/components/questionForm"
//类型标题
const genre = [{ name: "全部", type: "" },
{ name: "实训", type: "0" },
{ name: "答辩", type: "4" },
{ name: "面试", type: "1" },
{ name: "工作", type: "2" },
{ name: "其他", type: "3" },
{ name: "我的问答", type: "5" },
];


const questionDetail: React.FC = (props) => {
    let { question } = useStore()


    //开启我要提问弹框
    const [isModalVisible, setIsModalVisible] = useState(false);
    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    //查看全部内容
    let [lookAll, setLookAll] = useState(true)
    console.log(lookAll);

    //我要提问 实训项目下拉菜单
    let [practicalProjectList, setPracticalProjectList] = useState<IPracticalProjectList[]>([])

    useEffect(() => {
        getQuestionNameList().then(res => {
            console.log(res)
            setPracticalProjectList(res.data)
        })
    }, [])

    //问答数据列表的默认参数
    let queryParams: IQuestionListQuery = { isAsc: 'desc', type: '', pageNum: 1, pageSize: 8 };
    useEffect(() => {
        if (question.curgenre) {
            queryParams = {
                ...queryParams,
                type: question.curgenre,
                quality: question.quality,
                authentication: question.authentication,
                questionTitle: question.questionTitle,
                pageNum: question.pageNum
            }
        } else {
            queryParams = {
                ...queryParams,
                type: question.curgenre,
                quality: question.quality,
                authentication: question.authentication,
                questionTitle: question.questionTitle,
                pageNum: question.pageNum
            }
        }
        question.getQuestionList(queryParams)
    }, [question.curgenre, question.quality, question.authentication, question.questionTitle, question.pageNum]);

    return (
        <div className={styles.mainBox}>
            <div className={styles.main}>
                <div className={styles.main_title}>
                    问答 / 问答列表
                </div>
                <div className={styles.genre}>
                    <span>类型 : </span>
                    {
                        genre.map((item) => {
                            return <span key={item.type} className={item.type == question.curgenre ? styles.active : ""}
                                onClick={(e) => { question.setCurgenre(item.type) }}
                            >{item.name}</span>
                        })
                    }
                </div>
                <div className={styles.con}>
                    <li className={styles.con_title}>
                        <div>
                            <Checkbox onChange={(e) => { question.setQuality(e.target.checked) }}>仅看精品</Checkbox>
                            <Checkbox onChange={(e) => { question.setAuthentication(e.target.checked) }}>仅看教师认证答案</Checkbox>
                            <Input placeholder="搜索岗位"
                                suffix={<SearchOutlined onClick={() => { question.setQuestionTitle(question.title) }} />}
                                onChange={e => question.setTitle(e.target.value)} onKeyDown={e => {
                                    if (e.keyCode === 13) {
                                        question.setQuestionTitle(question.title)
                                    }
                                }} />
                            <Button type="primary" icon={<PlusOutlined />} onClick={showModal}>我要提问</Button>
                            {/* 我要提问弹框弹框 */}
                            <Modal title="提问" className={styles.ant_modal}
                                visible={isModalVisible}
                                onOk={handleOk}
                                onCancel={handleCancel}
                                footer={null}
                                bodyStyle={{ width: 830 }}
                                width={830}>
                                <div className={styles.form_box}>
                                    <QuestionForm />
                                </div>
                            </Modal>
                        </div>
                    </li>
                    <ul className={styles.uls}>
                        {
                            question.questionList.map((item) => {
                                return <div className={styles.divs} key={item.answerId}>
                                    <div>
                                        <div className={styles.divs_top}>
                                            <div className={styles.divs_top_left}>
                                                <span>{item.qUserName}</span>
                                                <span>{item.replyTime}</span>
                                                <span>实训类型:{genre.map(item1 => {
                                                    if (item1.type == item.typeNum) {
                                                        return <span className={styles.typeNum} key={item1.type}>{item1.name}</span>
                                                    }
                                                })}</span>
                                            </div>
                                            <div className={styles.divs_top_right}>
                                                <img src={xx} alt="" /><span>{item.answerCount}</span>
                                            </div>
                                        </div>
                                        <div className={styles.divs_con}>
                                            <div className={styles.divs_question_title}>
                                                <span>{item.quality ? <img src="http://111.203.59.61:8060/static/img/boutique.fc46be52.svg" alt="" /> : ""}</span>
                                                <span>{item.authentication ? <img src="http://111.203.59.61:8060/static/img/authentication.c814dd7c.svg" alt="" /> : ""}</span>
                                                <span>{item.questionTitle}</span>
                                            </div>
                                            <div className={styles.divs_con_children}>
                                                <div className={lookAll ? styles.questionContentActive : styles.questionContent}>
                                                    {item.questionContent}
                                                </div>
                                                <div className={styles.lookAll}><span onClick={() => {
                                                    setLookAll(lookAll ? false : true)
                                                }}>查看全部</span><DownOutlined /></div>
                                            </div>
                                        </div>
                                        <div className={styles.divs_comment}>{item.labels.map((item1, index1) => {
                                            return <span key={index1}>{item1}</span>
                                        })}</div>
                                    </div>
                                    <Button><Link to={`/teachers/answerDetail?answerId=${item.answerId}`}>回答</Link></Button>
                                </div>
                            })
                        }

                        <div className={styles.page}>
                            <Pagination
                                defaultCurrent={1}
                                onChange={(e) => { question.setPAgeNum(e) }}
                                total={question.questionListLen} size="default"
                                showSizeChanger showQuickJumper pageSize={8} pageSizeOptions={["8"]} />
                        </div>
                    </ul>
                </div>

            </div>
        </div>
    )
}
export default observer(questionDetail)
